/* Elimina los márgenes predeterminados del body */
body {
  margin: 0;
}

/* Estilos para el encabezado del sitio web */
.encabezado-personalizado {
  background-color: #f1f1f1; /* Color de fondo gris claro */
  padding: 20px;             /* Espaciado interior */
  text-align: center;        /* Centra el texto */
}

/* Aplicar box-sizing para mantener el tamaño total de los elementos controlado */
* {
  box-sizing: border-box;
}

/* Eliminar márgenes del cuerpo */
body {
  margin: 0;
}

/* Estilo del encabezado */
.encabezado-web {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Barra de navegación superior */
.barra-navegacion {
  overflow: hidden;
  background-color: #333;
}

/* Estilo de los enlaces dentro de la barra de navegación */
.barra-navegacion a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Efecto al pasar el cursor sobre los enlaces */
.barra-navegacion a:hover {
  background-color: #ddd;
  color: black;
}


/* Tres columnas iguales */
.columna-tercio {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Limpiar flotados */
.fila::after {
  content: "";
  display: table;
  clear: both;
}

/* Diseño responsivo: columnas apiladas en pantallas pequeñas */
@media screen and (max-width: 600px) {
  .columna-tercio {
    width: 100%;
  }
}

/* Estructura de columnas */
.columna-lateral, .columna-central {
  float: left;
  padding: 10px;
}

/* Columnas laterales ocupan el 25% */
.columna-lateral {
  width: 25%;
}

/* Columna central ocupa el 50% */
.columna-central {
  width: 50%;
}

/* Limpiar los floats */
.fila::after {
  content: "";
  display: table;
  clear: both;
}

/* Diseño responsivo para pantallas pequeñas */
@media screen and (max-width: 600px) {
  .columna-lateral, .columna-central {
    width: 100%;
  }
}

/* Style the footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

/* Estructura de columnas */
.fila::after {
  content: "";
  display: table;
  clear: both;
}

/* Columna izquierda - contenido principal */
.columna-izquierda {
  float: left;
  width: 75%;
}

/* Columna derecha - barra lateral */
.columna-derecha {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Estilo para imágenes falsas */
.imagen-falsa {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
  text-align: center;
  color: white;
}

/* Tarjetas para artículos y secciones */
.tarjeta {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Diseño responsivo para navegación en pantallas pequeñas */
@media screen and (max-width: 400px) {
  .barra-navegacion a {
    float: none;
    width: 100%;
  }
}